/**
 * Created with IntelliJ IDEA.
 * User: csavard
 * Date: 13-08-28
 * Time: 13:45
 * To change this template use File | Settings | File Templates.
 */
$(document).ready(function () {
    $('.kt-file-upload').each(function () {
        var container = $(this);
        var name = container.data('name');
        var description = container.data('description');
        var url = container.data('url');
        var clearUrl = container.data('clear-url');
        var help = container.data('help');
        var fileName = container.data('file-name');
        var isMultiple = container.data('multiple');

        var multiple = '';
        if (isMultiple) {
            multiple = 'multiple';
        }
        var fieldName = "kt-" + name;
        container.append(
            "<div class='form-group kt-file-upload-form-group'>" +
                "<label for='" + fieldName + "-input'>" + description + "</label>" +
                "<div class='input-group'>" +
                "<span class='btn btn-default fileinput-button input-group-addon'>" +
                "<i class='glyphicon glyphicon-import'></i>" +
                "<input id='" + fieldName + "-input' type='file' name='file' data-url='" + url + "' data-field-name='" + fieldName + "'" + multiple + "/>" +
                "</span>" +
                "<input id='" + fieldName + "-label' class='form-control' type='text' placeholder=\"" + help + "\" value='" + fileName + "' disabled>" +
                "</div>" +
                "<div class='kt-progress-container'>" +
                "<div id='" + fieldName + "-progress' class='progress progress-striped active kt-progress' style='display: none'>" +
                "<div id='" + fieldName + "-progress-bar' role='progressbar' class='progress-bar' style='width: 0%;'></div>" +
                "</div>" +
                "</div>" +
                "</div>");

        $("#" + fieldName + "-input").fileupload({
            dataType: 'json',
            start: function (e) {
                if (clearUrl !== null && clearUrl !== undefined) {
                    $.post(clearUrl);
                }
            },
            done: function (e, data) {
                var fieldName = $(this).data('field-name');
                var progressNode = $("#" + fieldName + "-progress");
                progressNode.fadeOut(1000);
            },
            error: function (e, data) {
                var fieldName = this.fieldName;
                var progressNode = $("#" + fieldName + "-progress");
                var progressBarNode = $("#" + fieldName + "-progress-bar");
                var progressLabelNode = $("#" + fieldName + "-label");

                progressNode.removeClass('active');
                progressBarNode.addClass('progress-bar-danger');
                progressLabelNode.val('');

                progressNode.fadeOut(3000);
            },
            add: function (e, data) {
                var fieldName = $(this).data('field-name');
                var progressNode = $("#" + fieldName + "-progress");
                var progressBarNode = $("#" + fieldName + "-progress-bar");
                var progressLabelNode = $("#" + fieldName + "-label");

                var filenames = '';
                var delimiter = '';
                data.originalFiles.forEach(function (file) {
                    filenames += delimiter + file.name;
                    delimiter = ', ';
                });

                progressLabelNode.val(filenames);

                progressNode.addClass('active');
                progressBarNode.removeClass('progress-bar-danger');
                progressBarNode.css(
                    'width',
                    '0%'
                );

                progressNode.fadeIn(1000);
                data.submit();
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);

                var fieldName = $(this).data('field-name');
                var progressBarNode = $("#" + fieldName + "-progress-bar");
                progressBarNode.css(
                    'width',
                    progress + '%'
                );
            }
        });
    });

});